<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>相册管理</title>
        <link href="plugin/date/date.css" rel="stylesheet">
        <link rel="stylesheet" href="plugin/picture/zoom.css">
        <link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <link rel="stylesheet" href="css/nav.css" />
        <style>
            .form-group-update {
                margin-right: 2%;
            }
            #bannerImg, #classificationImg {
                display: none;
            }
            .goodsBody {
                width: 90%;
                margin: 0 auto;
            }
            .goodsBody img {
                width: 100%;
            }
            #dataList th {
                min-width: 100px;
            }
            li {
                list-style: none;
            }
            .gallery {
                background-color: #f1f1f;
                padding: 20px 0;
            }
            .gallery a {
                display: block;
                margin-bottom: 1px;
                /*padding: 0 ;*/
                overflow: hidden;
                display: block;
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                position: relative;
            }
            .gallery a img {
                width: 100%;
            }
        </style>
    </head>

    <body>
        <!--导航-->
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button>
                    <a class="navbar-brand" href="">
                        <img src="images/admin_logo.png" alt="">
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                    <ul class="nav navbar-nav" id="nav">

                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">
                                <li><a href="change_pass.html">修改密码</a></li>
                                <li><a id="loginOut" href="#">退出登陆</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row bcert-box">
                <ol class="breadcrumb">
                    <li><a href="javascript:;">主页</a></li>
                    <li>商品管理</li>
                    <li class="active">相册管理</li>
                </ol>
                <form class="form-inline searchForm" id="excleBtn">
                    <div class="form-group"> <span class="theme-title">商铺名称查询:</span>

                        <input type="text" class="form-control" style="padding-left:12px;" name="storeName" id="storeName" placeholder="请输入商铺名称查询">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-default" id="QueryBtn" data-toggle="button" aria-pressed="false" autocomplete="off">查询</button>
                        <!-- <button type="button" class="btn btn-danger" id="deletePic">删除</button> -->
                        <!-- <button type="button" class="btn btn-primary btn-success" id="dlexcle"></span> 导出excle</button> -->
                    </div>
                </form>
                <div class="table">
                    <table class="table table-bordered table-striped" id="dataList"></table>
                </div>
                <!-- 分页 -->
                <nav aria-label="...">
                    <div class=""> <span id="pageNum">共 <strong></strong> 页 / </span><span id="totalNum"> <strong>0</strong> 条数据</span>

                        <!-- <label> -->
                        <!-- <input type="checkbox" aria-label="..."> -->
                        <button type="button" class="btn btn-primary btn-sm" id="allCheck">全选</button>
                        <!-- </label> -->
                    </div>
                    <ul id="example"></ul>
                </nav>
            </div>
        </div>
    </body>

</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
    //图片数组初始化
    var ids = [];
    //图片id初始化
    var aclassId = '';

    $(document).on("click", ".choose", function() {
        var _this = $(this)
        if (_this.val() == 0) {
            ids.push(_this.attr("data-id"));
            _this.val(1)
        } else if (_this.val() == 1) {
            // ids.remove(_this.val());
            Array.prototype.indexOf = function(val) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) return i;
                }
                return -1;
            };
            Array.prototype.remove = function(val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };
            var thisId = _this.attr("data-id");
            ids.remove(thisId);
            _this.val(0)
        }
        console.log(ids);
    })
    //全选
    $('#allCheck').click(function() {
        $('.choose').trigger("click");
    })

    //浏览器改变大小图片比例
    $(window).resize(function() {
        $('.gallery a').height($('.gallery a').width())
    });

    //初始化数据
    $(document).ready(function() {
        tableList()
        $('.gallery a').height($('.gallery a').width())
    });
    $('#QueryBtn').click(function() {
        tableList()
    })

    //列表url
    var pageUrls = serverURL + '/platform/queryAlbumClass';
    //分页

    function tableList() {
        data = {
            'storeName': $('#storeName').val(),
            'page': page,
            'pageSize': pagesize
        }
        data.page = 1
        ajax(
            pageUrls,
            data,
            pageNumList,
            'post',
            'json')
    }

    //分页数据

    function OpendList(res) {
        var result = '';
        console.log(res)
        $('#dataList').empty();
        $('#dataList').append(
            '<tr>' +
            '<th>相册id</th>' +
            // '<th>相册封面</th>' +
            '<th>店铺名称</th>' +
            '<th>相册名称</th>' +
            '<th>图片数量</th>' +
            '<th>操作</th>' +
            '</tr>');
        for (var i = 0; i < res.data.list.length; i++) {
            //<label><input type="checkbox" data-id="'+ res.data.list[i].aclassId +'" class="choose" value="0" aria-label="...">选择</label>
            result +=
                '<tr>' +
                '<td>' + res.data.list[i].aclassId + '</td>' +
                // '<td>' + res.data.list[i].aclassCover + '</td>' +
                '<td>' + res.data.list[i].storeName + '</td>' +
                '<td>' + res.data.list[i].aclassName + '</td>' +
                '<td>' + res.data.list[i].num + '</td>' +
                '<td class="text-center">' +
                '<button type="button" onClick="window.open(\'photo.html?aclassId=' + res.data.list[i].aclassId + '\')" class="btn btn-primary btn-sm">查看</button>' +
                '   <button data-id="' + res.data.list[i].aclassId + '" type="button" class="btn btn-danger btn-sm deletePicOne">删除</button>' +
                '</td>' +
                '</tr>'
        }
        $('#dataList').append(result)
    }
    $('#deletePic').click(function() {
        aclassId = ids.join(',')
        if (ids.length > 0) {
            deletePic(aclassId)
        } else {
            layer.msg('请选择要删除的图片')
            return false;
        }

    })
    $(document).on('click', '.deletePicOne', function() {
        aclassId = $(this).attr('data-id')
        deletePic(aclassId)
    })
    //删除相册

    function deletePic(apicId) {
        layer.confirm('确定要删选中的相册吗？', {
            btn: ['确定', '取消'] //按钮
        }, function() {
            data = {
                'aclassId': aclassId,
            }
            cbk = function(res) {
                layer.msg(data.msg)
                tableList()
                ids = [];
            }
            ajax(
                serverURL + '/platform/deleteAlbumById',
                data,
                cbk,
                'post',
                'json')
        }, function() {

        });
    }
</script>
